html.light {
  // element-plus
  // menu
  --el-menu-text-color: var(--text-color);
  --el-menu-hover-text-color: var(--text-color);
  --el-menu-active-color: var(--text-color);
  --el-menu-bg-color: var(--bg-color);
  --el-menu-hover-bg-color: var(--hover-bg-color);

  --el-color-primary-light-3: #5c81c0;
  --el-color-primary-light-5: #5c81c0;
  --el-color-primary-light-7: #5c81c0;
  --el-color-primary-light-8: #e8f4ef;
  --el-color-primary-light-9: #e8f4ef;
  --el-color-primary-dark-2: #2f5aa3;
}

@mixin button-before-icon {
  &::before {
    content: '';
    display: inline-block;
    width: 17px;
    height: 17px;
    background-size: 100% 100%;
    margin-right: 5px;
  }
}

.el-button {
  &.el-button--primary.is-link:focus {
    color: var(--el-color-primary-dark-2);
  }
  &.el-button--primary:focus {
    background-color: var(--el-color-primary-dark-2);
  }

  &.icon-excel {
    @include button-before-icon();
    &::before {
      background-image: url('../svg/excel.svg');
    }
  }

  &.icon-word {
    @include button-before-icon();
    &::before {
      background-image: url('../svg/word.svg');
    }
  }

  &.icon-sync {
    @include button-before-icon();
    &::before {
      height: 14px;
      background-image: url('../svg/sync.svg');
    }
  }

  &.icon-window {
    @include button-before-icon();
    &::before {
      height: 14px;
      background-image: url('../svg/window.svg');
    }
  }

  &.icon-excerpt {
    @include button-before-icon();
    &::before {
      height: 14px;
      background-image: url('../svg/excerpt.svg');
    }
  }



}

.el-button--primary.is-plain{
  background: transparent !important;
  border: 1px solid #5e75a1 !important;
  color: #5e75a1 !important;
}


.el-drawer__title{
  color: #333;
  font-size: 18px;
}

.el-menu--horizontal {
  --el-menu-hover-bg-color: transparent;
  .el-menu-item,
  .el-sub-menu .el-sub-menu__title {
    &.is-active {
      font-weight: bold;
    }
    &:hover {
      font-weight: bold;
    }
  }

  .el-menu--popup {
    --el-menu-text-color: var(--bg-color);
    --el-menu-hover-text-color: var(--text-color);
    --el-menu-active-color: var(--bg-color);
    --el-menu-bg-color: #FBFFFE;
    --el-menu-hover-bg-color: var(--hover-bg-color);
    padding: 0;

    .el-menu-item.is-active {
      --el-menu-bg-color: var(--hover-bg-color);
      --el-menu-active-color: #ffffff;
    }
    .el-sub-menu .el-sub-menu__title {
      &:hover {
        --el-menu-bg-color: var(--hover-bg-color);
        --el-menu-text-color: #ffffff;
      }
    }
  }
}

.el-card {
  .el-card__header {
    font-size: 18px;
    font-weight: 700;
  }
}

.el-dialog {
  .m-form {
    .m-tree-select,
    .el-select,
    .el-date-editor {
      width: 100%;
    }
  }
}

// .el-tabs{
//   background: #fff;
//   .el-tabs__nav{
//     padding: 0 20px;
//     .el-tabs__item{
//       font-size: 18px;
//       font-weight: 400;
//       height: 64px;
//     }
//   }
//   .el-tabs__content{
//     padding: 10px 20px;
//   }

// }


.el-tabs{
  background: #fff;
  .el-tabs__nav{
    // padding: 0 20px;
    .el-tabs__item{
      font-size: 18px;
      font-weight: 400;
      height: 64px;
    }
  }
  .el-tabs__content{
    // padding: 10px 20px;
  }

}

.has-border-drawer {
  .el-drawer {
    .el-drawer__header {
      border-bottom: 1px solid #e5e6eb;
      padding-bottom: 20px;
      margin-bottom: 0;
    }
    .el-drawer__footer {
      border-top: 1px solid #e5e6eb;
      padding-top: 20px;
    }
  }
}

.has-border-dialog {
  &.el-dialog {
    .el-dialog__header {
      padding: 20px;
    }
    .el-dialog__body {
      border-top: 2px solid #e9e9e9;
      border-bottom: 2px solid #e9e9e9;
      padding: 20px;
    }
    .el-dialog__footer {
      padding: 15px 20px;
    }
  }
}

.el-dialog {
  &__header {
    border-bottom: 1px solid #e5e6eb;
    padding: 12px;
    margin-right: 0;
    .el-dialog__headerbtn {
      width: 40px;
      height: 40px;
    }
  }
  &__footer {
    border-top: 1px solid #e5e6eb;
    padding: 12px;
    display: flex;
    flex-direction: row-reverse;
    .el-button {
      margin-left: 10px;
    }
  }
}

.el-message-box {
  min-width: 560px;
  .el-message-box__message {
    div div {
      padding: 5px 0;
    }
  }
  &__header {
    border-bottom: 1px solid #e5e6eb;
    padding: 12px;
  }
  &__content {
    padding: 40px;
    .el-message-box-icon--warning {
      font-size: 50px !important;
    }
    .el-message-box__message {
      margin-left: 40px;
      color: #333333;
    }
  }
  &__btns {
    border-top: 1px solid #e5e6eb;
    padding: 12px 12px 2px 12px;
    flex-direction: row-reverse;
    justify-content: flex-start;
    .el-button {
      margin-left: 10px;
    }
  }
}
